<template>
  <div class="echart-grid">
    <FormItem
      :form="form"
      option="echart.series.radarStyle.show"
      :label="$demoi18n('echart.setting.radarFilling')"
      type="switch"
      serie-type="radar"
    />
    <FormItem
      :form="form"
      option="echart.series.itemStyle.opacity"
      :label="$demoi18n('panel.label.opacityPercent_1')"
      type="number"
      serie-type="sankey"
      :precision="2"
      :step="0.01"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.type"
      :label="$demoi18n('echart.label.lineType')"
      type="select"
      :options="lineTypes"
      serie-type="line"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.width"
      :label="$demoi18n('echart.label.lineweight')"
      type="number"
      serie-type="line"
    />
    <FormItem
      :form="form"
      option="echart.series.0.startAngle"
      :label="$demoi18n('echart.label.startAngle')"
      type="number"
      serie-type="pie"
    />
    <FormItem
      :form="form"
      option="echart.series.radarStyle.type"
      :label="$demoi18n('echart.setting.radarShape')"
      type="select"
      :options="radarTypes"
      serie-type="radar"
    />
    <FormItem
      :form="form"
      option="echart.series.0.center.0"
      :label="$demoi18n('echart.label.radarCenterPositionX')"
      type="number"
      :show-unit="true"
      serie-type="pie"
    />
    <FormItem
      :form="form"
      option="echart.series.0.center.1"
      :label="$demoi18n('echart.label.radarCenterPositionY')"
      type="number"
      :show-unit="true"
      serie-type="pie"
    />
    <FormItem
      :form="form"
      option="echart.series.radar.radius"
      :label="$demoi18n('echart.label.radarRadius')"
      type="number"
      serie-type="radar"
    />
    <FormItem
      :form="form"
      option="echart.series.radar.nameGap"
      :label="$demoi18n('echart.label.radarNameGap')"
      type="number"
      serie-type="radar"
    />
    <FormItem
      :form="form"
      option="echart.backgroundColor"
      :label="$demoi18n('word.backgroundColor')"
      type="color"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import {
  fontWeightOptions,
  fontFamilyOptions,
  lineTypes,
  radarTypes,
} from '@/components/common/echart/form-item-options.js';
export default {
  components: { FormItem },
  mixins: [],
  props: {
    form: Object,
  },
  data() {
    return {
      fontWeightOptions,
      fontFamilyOptions,
      lineTypes,
      radarTypes,
    };
  },
  computed: {},
  watch: {
    'form.echart.backgroundColor'(color) {
      const titleCss = this.form.cssStyle && this.form.cssStyle.title;
      if (titleCss) {
        titleCss.backgroundColor = color;
      }
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped></style>
